<template>
  <div class="product">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div class="pro-top content-top">
        <div class="top-bar">生产信息</div>
        <div class="pro-chart">
          <canvas class="chart-box" id="proChart"></canvas>
        </div>
      </div>
      <!-- //状态展示 -->
      <statu-list :dafaultData="dafaultDataList"></statu-list>
      
    </van-pull-refresh>
  </div>
</template>

<script>
var echarts = require("echarts");
import NavBar from "../../components/NavBar.vue";
import StatuList from "@/views/product/pro-component/StatuList.vue";
import { getProductStateInfo, getProductInfo } from "../../api/product";

export default {
  name: "product",
  components: {
    NavBar,
    StatuList,
  },
  data() {
    return {
      dafaultDataList: [],
      productInfo: [],
      isLoading: false,
      freshHeight: ''
    };
  },
  mounted() {
    this.$emit("getPathParams", this.$route.path);
    
  },
  created() {
    this.getProductData();
    getProductStateInfo()
      .then((res) => {
        this.dafaultDataList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    onRefresh() {
      getProductInfo()
        .then((res) => {
          this.productInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
      getProductStateInfo()
        .then((res) => {
          this.isLoading = false;
          this.dafaultDataList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getProductData() {
      getProductInfo()
        .then((res) => {
          this.productInfo = res.data;
          console.log(res.data);
          this.$nextTick(() => {
            this.drawChart();
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      var _this = this;
      var chartDom = document.getElementById("proChart");
      var myChart = echarts.init(chartDom, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      var option;
      option = {
        dataset: {
          dimensions: ["IHOUR", "LLCL", "SJCL"],
          source: _this.productInfo,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            height: "30",
            bottom: "20",
            zoomLock: true,
          },
        ],
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        legend: {
          top: "7",
          itemWidth: 17,
          itemHeight: 9,
          data: ["计划产量", "实际产量"],
          textStyle: {
            fontSize: 7,
          },
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              fontSize: 7,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLabel: {
              formatter: "{value}",
              fontSize: 7,
            },
          },
        ],
        series: [
          {
            name: "计划产量",
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#555555",
              fontSize: 8,
            },
            itemStyle: {
              color: "#066EF4",
            },
          },
          {
            name: "实际产量",
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#555555",
              fontSize: 8,
            },
            itemStyle: {
              color: "#4cabce",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="less">
.product {
  .pull-refresh-head-height{
    height: 0 !important;
  }
  .top-bar {
    line-height: 1.22rem;
    text-align: center;
    background-color: #066ef4;
    height: 1.22rem;
    color: #fff;
    font-size: 0.4rem;
  }
  .chart-box {
    width: 100%;
    height: 6.5333rem !important;
  }
}

</style>